<template>
	<view class="navigator-wrapper">
		<view class="navigator-item" v-for="(item, index) in navList" :key="item._id || index"
			@click="handleNavigate(item)">
			<image class="navigator-icon" :src="item.icon" mode="aspectFit" />
			<text class="navigator-name">{{ item.name }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getNavigators
	} from '../../api/homeApi'

	const navList = ref([])

	onLoad(() => {
		fetchData()
	})

	const fetchData = async () => {
		try {
			const res = await getNavigators()
			if (res?.data?.length) {
				navList.value = res.data
			} else {
				console.warn('导航数据为空')
			}
		} catch (err) {
			console.error('获取导航失败', err)
			uni.showToast({
				title: '加载菜单失败',
				icon: 'none'
			})
		}
	}

	const handleNavigate = (item) => {
		if (!item.navigateUrl) return
		// 根据 openType 自动跳转
		uni.navigateTo({
			url: `${item.navigateUrl}?id=${item._id}&name=${item.name}`
		})
	}
</script>

<style lang="scss" scoped>
	.navigator-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 32rpx;
	}

	.navigator-item {
		width: 20%; // 一行显示5个
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.navigator-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		padding: 20rpx;

		margin-bottom: 12rpx;
	}

	.navigator-name {
		font-size: 26rpx;
		color: #333;
	}
</style>